<script setup>
import { useRouter } from "vue-router";
import { reactive } from "vue";
const router = useRouter();
const data = reactive({
  user_name: "",
  mobile: "",
  consignee: "",
});
</script>
<template>
  <div class="add">
    <header>
      <van-icon name="arrow-left" @click="$router.back()" />
      <h3>新增地址</h3>
      <p @click="$router.push('/addaddress')">保存</p>
    </header>
    <div class="box">
      <van-cell-group inset>
        <van-field v-model="data.user_name" label="收货人" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="data.mobile" label="联系方式" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="value" label="所在地区" />
      </van-cell-group>
      <input
        type="text"
        v-model="data.consignee"
        placeholder="请输入详细地址"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.add {
  background: #fafafa;
  header {
    height: 88px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    .van-icon {
      width: 60px;
      height: 60px;
      text-align: center;
    }
    p {
      width: 120px;
      height: 120px;
      text-align: center;
      font-size: 26px;
      line-height: 120px;
      margin-right: 20px;
    }
    h3 {
      flex: 1;
      text-align: center;
      font-size: 36px;
      margin-left: 80px;
    }
  }
  .box {
    background: #fff;
    .van-cell-group {
      border-bottom: 1px solid rgba(0, 0, 0, 0.301);
    }
    input {
      width: 90%;
      margin: 0 50px;
      margin-top: 30px;
      font-size: 24px;
      height: 100px;
      border: none;
    }
  }
}
</style>
